<template>
  <div class="div-box flex-column flex-center">
    <div class="flex-row flex-center" style="width: 90%; height: 100%; gap: 20px">
      <!-- 左侧功能栏 -->
      <div style="width: 15%; height: 90%; background-color: white">
        <el-row>
          <el-col :span="12" style="width: 100%; font-family: pfsc-b">
            <el-menu text-color="rgba(78, 89, 105, 1)" default-active="1" @select="handleSelect">
              <el-menu-item index="1">用户信息</el-menu-item>
              <el-menu-item index="2">用户设置</el-menu-item>
              <el-menu-item index="3">我联系的</el-menu-item>
              <el-menu-item index="4">联系我的</el-menu-item>
              <el-menu-item index="5">互选列表</el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <!-- 右侧-用户信息 -->
      <div style="width: 80%; height: 90%; gap: 16px" class="flex-column flex-center" v-if="chooseTab == 1">
        <!-- 上方个人信息 -->
        <div style="width: 100%; height: 30%; gap: 6px" class="head-back flex-column flex-center">
          <el-avatar style="width: 100px; height: 100px"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <div style="font-family: pfsc-mb">{{ userInfo.username }}</div>
          <div class="flex-row" style="gap: 16px; font-family: pfsc">
            <div class="flex-row flex-center" style="gap: 4px">
              <svg-icon iconClass="note"></svg-icon>{{ studentDetail.university }}
            </div>
            <div class="flex-row flex-center" style="gap: 4px">
              <svg-icon iconClass="light"></svg-icon>{{ studentDetail.major }}
            </div>
            <div class="flex-row flex-center" style="gap: 4px">
              <svg-icon iconClass="hand"></svg-icon>{{ studentDetail.majorRank }}
            </div>
          </div>
        </div>
        <!-- 信息显示 -->
        <div class="flex-row" style="gap: 20px; width: 100%; height: 70%">
          <!-- 我的推荐 -->
          <div style="
              width: 85%;
              height: 100%;
              background-color: white;
              padding: 16px;
            ">
            <h4>猜你喜欢</h4>
            <div v-if="recommendList.length > 0" class="flex-row"
              style="width: 100%; gap: 20px; flex-wrap: wrap; margin-top: 20px">
              <recommand-card v-for="(item, index) in recommendList" :key="index" :userInfo="item"></recommand-card>
            </div>
            <div v-else style="width: 100%;height: 100%;">
              <svg-icon iconClass="default" style="width: 100%;height: 100%;"></svg-icon>
            </div>
          </div>

          <div style="
              width: 15%;
              height: 100%;
              background-color: white;
              padding: 16px;
            ">
            <h4>工具栏</h4>
            <div class="flex-row" style="gap: 8px; margin-top: 12px">
              <div class="flex-column flex-center" style="cursor: pointer" @click="dialogFormVisible = true">
                <svg-icon iconClass="if" style="font-size: 24px"></svg-icon>
                <div style="font-size: small; margin-top: 6px">推荐条件</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧-用户设置 -->
      <div style="width: 80%; height: 90%; gap: 16px" class="flex-column flex-center" v-else-if="chooseTab == 2">
        <!-- 上方个人信息 -->
        <div style="
            width: 100%;
            height: 25%;
            background-color: white;
            padding: 30px 0px 30px 40px;
            justify-content: flex-start;
            align-items: center;
            gap: 60px;
          " class="flex-row">
          <el-avatar style="width: 100px; height: 100px"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
          <div style="
              font-size: 14px;
              flex-wrap: wrap;
              gap: 35px;
              flex-wrap: wrap;
              width: 50%;
            " class="flex-row info">
            <div>
              用户名:<span style="margin-left: 4px;">{{ userInfo.username || "获取失败" }}</span>
            </div>
            <div>
              注册时间:<span style="margin-left: 4px;">{{ studentDetail.createAt.replace("T", " ") || "还未添加呀！" }}</span>
            </div>
            <div>
              学校:<span style="margin-left: 4px;">{{ studentDetail.university || "还未添加呀！" }}</span>
            </div>
            <div>
              专业:<span style="margin-left: 4px;">{{ studentDetail.major || "还未添加呀！" }}</span>
            </div>
            <div>
              专业评级:<span style="margin-left: 4px;">{{ studentDetail.majorRank || "还未添加呀！" }}</span>
            </div>
          </div>
        </div>
        <!-- 信息显示 -->
        <div class="padding-25 showInfo">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基础信息" name="first">
              <form-vaild-vue></form-vaild-vue>
            </el-tab-pane>
            <el-tab-pane label="修改信息" name="second">
              <basic-info-form-vue></basic-info-form-vue>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
      <!-- 我联系的 -->
      <div style="width: 80%; height: 90%; gap: 16px" class="flex-column flex-center" v-else-if="chooseTab == 3">
        <!-- 信息显示 -->
        <div class="flex-row" style="gap: 8px; width: 100%; height: 100%">
          <!-- 我的推荐 -->
          <div style="
              width: 100%;
              height: 100%;
              background-color: white;
              padding: 16px;
            ">
            <h4>我联系的</h4>
            <recommand-table-vue style="margin-top: 12px" :tableType="1"></recommand-table-vue>
          </div>
        </div>
      </div>
      <!-- 联系我的 -->
      <div style="width: 80%; height: 90%; gap: 16px" class="flex-column flex-center" v-else-if="chooseTab == 4">
        <!-- 信息显示 -->
        <div class="flex-row" style="gap: 8px; width: 100%; height: 100%">
          <!-- 我的推荐 -->
          <div style="
              width: 100%;
              height: 100%;
              background-color: white;
              padding: 16px;
            ">
            <h4>联系我的</h4>
            <recommand-table-vue style="margin-top: 12px" :tableType="2"></recommand-table-vue>
          </div>
        </div>
      </div>
      <!-- 右侧-推荐列表 -->
      <div style="width: 80%; height: 90%; gap: 16px" class="flex-column flex-center" v-else-if="chooseTab == 5">
        <!-- 信息显示 -->
        <div class="flex-row" style="gap: 8px; width: 100%; height: 100%">
          <!-- 我的推荐 -->
          <div style="
              width: 100%;
              height: 100%;
              background-color: white;
              padding: 16px;
            ">
            <h4>联系列表</h4>
            <recommand-table-vue style="margin-top: 12px" :tableType="3"></recommand-table-vue>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="推荐偏重" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" ref="form">
        <el-form-item label="学院" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.departmentSet" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="研究方向" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.searchWaySet" autocomplete="off" placeholder="请用,分隔"></el-input>
        </el-form-item>
        <el-form-item label="兴趣爱好" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.hobbySet" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm()">取 消</el-button>
        <el-button type="primary" @click="updateRecommend()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WeightService from "@/service/WeightService"
import formVaildVue from "@/components/formVaild.vue";
import RecommandCard from "@/components/recommandCard.vue";
import basicInfoFormVue from "@/components/basicInfoForm.vue";
import recommandTableVue from "@/components/recommandTable.vue";
import { Message } from "element-ui";
export default {
  name: "MySpace",
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
      studentDetail: JSON.parse(sessionStorage.getItem("studentDetail")),
      chooseTab: 1,
      activeName: "first",
      dialogTableVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        departmentSet: 0.35,
        searchWaySet: 0.4,
        hobbySet: 0.25,
      },
      formLabelWidth: "120px",
      pages: {
        pageNum: 1,
        pageSize: 8,
      },
      totalPage: 0,
      recommendList: []
    };
  },
  components: {
    RecommandCard,
    formVaildVue,
    basicInfoFormVue,
    recommandTableVue,
  },
  mounted() {
    if (sessionStorage.getItem("recommendSet")) {
      this.ruleForm = JSON.parse(sessionStorage.getItem("recommendSet"))
    }
    this.getRecommend()
  },
  methods: {
    handleSelect(index) {
      this.chooseTab = index;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async getRecommend() {
      try {
        const params = {
          id: this.userInfo.id,
          ...this.ruleForm,
          userType: "student",
        };
        this.ruleForm.departmentSet = String(this.ruleForm.departmentSet)
        this.ruleForm.hobbySet = String(this.ruleForm.hobbySet)
        this.ruleForm.searchWaySet = String(this.ruleForm.searchWaySet)
        sessionStorage.setItem("recommendSet",JSON.stringify(this.ruleForm))
        const response = await WeightService.getRecommend(params);
        if (response.code == 0) {
          this.recommendList = response.data[1]
          this.recommendList.forEach((stu) => {
            stu.searchWay = stu.searchWay == null ? [] : stu.searchWay.split(";");
            stu.createAt = stu.createAt.replace("T", " ");
          });
        }
      } catch (error) {
        Message.error(error);
      }
    },
    updateRecommend(){
      this.getRecommend()
      Message.success("调整成功！");
      this.dialogFormVisible = !this.dialogFormVisible
    },
    resetForm() {
      this.dialogFormVisible = !this.dialogFormVisible
    },
  },
};
</script>

<style lang="scss" scoped>
.head-back {
  width: 100%;
  height: 100%;
  background: url(https://img.js.design/assets/img/62cb96d93f400e141660013d.png);
}

.showInfo {
  width: 100%;
  height: 75%;
  background-color: white;
  overflow-x: scroll;
}

.showInfo::-webkit-scrollbar {
  display: none;
}

.info {
  span {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 22px;
    color: rgb(160, 163, 170);
  }
}

.el-menu-item:hover {
  border-left: #33a2ef solid 6px !important;
  background-color: #e2eff9 !important;
  color: #38b2ff !important;

  i {
    color: #38b2ff;
  }
}

.el-menu-item.is-active {
  border-left: #33a2ef solid 6px !important;
  background-color: #e2eff9 !important;
  color: #38b2ff !important;
  font-weight: bold;
}
</style>